<template>
    <div class="main-box">
        <div class="table-box">
            <div class="mb15">
                <Button type="primary" @click="toAdd()">添加管理员</Button>
            </div>
            <Table :columns="tableColumns" :data="tableData" stripe>
                <template slot-scope="{ row, index }" slot="status">
                    <Tag color="success" v-if="row.status == 1">启用</Tag>
                    <Tag color="error" v-else>未启用</Tag>
                </template>
                <template slot-scope="{ row, index }" slot="action">
                    <Button type="primary" size="small" @click="toEdit(row)">编辑</Button>
                    <Button type="error" size="small" @click="toDel(row)" :disabled="row.admin_id == 1">删除</Button>
                </template>
            </Table>
        </div>

        <!-- 新建/编辑 弹窗 -->
        <Modal v-model="visible" title="用户管理" width="750px">
            <Form :model="formData" ref="form" :rules="rules" :label-width="100">
                <el-row>
                    <el-col :span="11">
                        <FormItem label="管理员账号" prop="account">
                            <Input type="text" v-model="formData.account" placeholder="请输入管理员账号" clearable :maxlength="50" :disabled="!!formData.admin_id"></Input>
                        </FormItem>
                    </el-col>
                    <el-col :span="12">
                        <FormItem label="密码" prop="password">
                            <Input type="text" v-model="formData.password" placeholder="请输入密码" clearable :maxlength="50"></Input>
                        </FormItem>
                    </el-col>
                    <el-col :span="11">
                        <FormItem label="管理员角色" prop="role_id">
                            <Select v-model="formData.role_id" placeholder="请输入管理员角色">
                                <Option v-for="item in roleList" :value="item.role_id" :key="item.role_id">{{ item.role_name }}</Option>
                            </Select>
                        </FormItem>
                    </el-col>
                    <el-col :span="22">
                        <FormItem label="状态" prop="status">
                            <i-switch v-model="formData.status" :true-value="1" :false-value="0">
                                <span slot="open">启用</span>
                                <span slot="close">停用</span>
                            </i-switch>
                        </FormItem>
                    </el-col>
                </el-row>
            </Form>
            <div slot="footer">
                <Button type="default" @click="onCancel">取消</Button>
                <Button type="primary" @click="onSave" @keyup.enter="onSave" :loading="loading">保存</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "admin-list",
    data() {
        return {
            tableColumns: [
                {
                    title: "ID",
                    key: "admin_id",
                    minWidth: 50,
                },
                {
                    title: "管理员账号",
                    key: "account",
                    minWidth: 100,
                },
                {
                    title: "角色名称",
                    key: "role_name",
                    minWidth: 100,
                },
                {
                    title: "状态",
                    key: "status",
                    slot: "status",
                    align: "center",
                    minWidth: 100,
                },
                // {
                //     title: "最后登录时间",
                //     key: 'last_login_time',
                //     minWidth: 200,
                // },
                // {
                //     title: "最后登录IP",
                //     key: 'last_login_ip',
                //     minWidth: 200,
                // },
                {
                    title: "操作",
                    slot: "action",
                    width: 240,
                    align: "center",
                },
            ],
            tableData: [],
            visible: false,
            loading: false,
            roleList: [],
            formData: {
                admin_id: "",
                account: "",
                password: "",
                role_id: "",
                status: 1,
            },
            rules: {
                account: [{ required: true, message: "请输入管理员账号", trigger: "blur" }],
                role_id: [{ required: true, message: "请选择管理员角色", trigger: "blur", type: "number" }],
            },
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getData();
            this.getRoleList();
        },
        getData() {
            api.getAdminList().then((res) => {
                this.tableData = res;
            });
        },
        getRoleList() {
            api.getAdminRoleList().then((res) => {
                this.roleList = res;
            });
        },
        toEdit(row) {
            this.formData = {
                ...row,
            };
            this.visible = true;
        },
        toAdd() {
            this.visible = true;
            this.formData = this.$options.data().formData;
        },
        toDel(row) {
            api.delAdmin({
                admin_id: row.admin_id,
            }).then((res) => {
                this.$Message.success("删除成功!");
                this.getData();
            });
        },
        onCancel() {
            this.visible = false;
        },
        onSave() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    api.saveAdminDeatil(this.formData)
                        .then((res) => {
                            this.$Message.success("保存成功!");
                            this.visible = false;
                            this.getData();
                        })
                        .finally(() => {
                            this.loading = false;
                        });
                }
            });
        },
    },
};
</script>
<style scoped lang="less">
.main-box {
    /deep/ .google-secret {
        font-family: monospace;
    }
}

/deep/ .auth-tree {
    user-select: none;
}
</style>
